<template>
  <el-dialog :title="title"
             :close-on-click-modal="false"
             v-loading="loading"
             @close="$emit('close')" :visible.sync="visible">
    <el-form :model="form" size="mini" inline ref="form">
      <div class="pnr-panel" style="font-weight: bold">
        <div class="pnr-col w150">起飞时间</div>
        <div class="pnr-col w120">出发地机场</div>
        <div class="pnr-col w120">目的地机场</div>
        <div class="pnr-col w120">航班号</div>
        <div class="pnr-col w120">舱位</div>
      </div>
      <div class="pnr-panel">
        <div v-for="(item, idx) in form.tripInfoList" :key="idx">
          <div class="pnr-col w150"><el-form-item>{{item.takeOffTime | datetimeShortFormat1}}</el-form-item></div>
          <div class="pnr-col w120"><el-form-item>{{item.dPort}}</el-form-item></div>
          <div class="pnr-col w120"><el-form-item>{{item.aPort}}</el-form-item></div>
          <div class="pnr-col w120"><el-form-item>{{item.flight}}</el-form-item></div>
          <div class="pnr-col w120">
            <el-form-item>
              <el-input v-model="item.subClass"/>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="pnr-panel" style="font-weight: bold">
        <div class="pnr-col w120">姓名</div>
        <div class="pnr-col w200">手机号</div>
        <div class="pnr-col w350">&nbsp;</div>
      </div>
      <div class="pnr-panel">
        <div v-for="(item, idx) in form.passengerList" :key="idx">
          <div class="pnr-col w120">
            {{item.passengerName}}
            <span class="mark-adult" v-if="item.ageType === 'ADU'">成</span>
            <span class="mark-child" v-if="item.ageType === 'CHI'">童</span>
            <span class="mark-baby" v-if="item.ageType === 'BAB'">婴</span>
          </div>
          <div class="pnr-col w200">
            <el-form-item>
              <el-autocomplete
                v-model="item.passengerMobile"
                :fetch-suggestions="queryCtcm"
              />
            </el-form-item>
          </div>
          <div class="pnr-col w350" v-if="item.ageType === 'CHI'">
            <el-form-item label="生日" label-width="80px" :prop="'passengerList[' + idx + '].birthDate'" :rules="rules.birthDate">
              <el-date-picker
                v-model="item.birthDate"
                type="date"
                placeholder="生日">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="pnr-panel">
        <div>
          <div class="pnr-col w120">
            OSI BK CTCT
          </div>
          <div class="pnr-col w200">
            <el-form-item>
              <el-autocomplete
                v-model="form.ctctMobile"
                :fetch-suggestions="queryCtct"
              />
            </el-form-item>
          </div>
        </div>
        <div>
          <div class="pnr-col w120">
            OFFICE号
          </div>
          <div class="pnr-col w200">
            <el-form-item>
              <el-select v-model="form.issueOffice" class="w160">
                <el-option v-for="item in options.officeNo" :value="item.key" :key="item.key" :label="item.cname"/>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="center-box">
      <el-button @click="visible = false">取 消</el-button>
      <easy-button v-if="data.recordNo" type="primary" @click="onOk">更换PNR</easy-button>
      <easy-button v-else type="primary" @click="onOk">订座</easy-button>
    </div>
  </el-dialog>
</template>

<script>
import Dict from '@/constants/Dict'

export default {
  name: 'ChangePnrDialog',
  props: {
    data: {
      type: Object,
      default () {
        return {
          localOrderId: '',
          issueOffice: '',
          passengerList: []
        }
      }
    }
  },
  data () {
    return {
      title: this.data.recordNo ? '更换PNR' : '订座',
      visible: true,
      loading: false,
      options: {
        officeNo: Dict.Options.officeNo,
        ctcm: [],
        ctct: []
      },
      form: {
        localOrderId: '',
        ctctMobile: '',
        issueOffice: '',
        passengerList: [],
        tripInfoList: []
      },
      rules: {
        birthDate: this.$checkRules.orderIssueDetail.birthDate
      }
    }
  },
  watch: {
    'form.passengerList' () {
      this.initPhone()
    },
    'options.ctcm' () {
      this.initPhone()
    },
    'options.ctct' () {
      if (this.options.ctct.length > 0) {
        this.form.ctctMobile = this.options.ctct[0].key
      }
    }
  },
  created () {
    this.form.passengerList = []
    this.form.localOrderId = this.data.localOrderId
    this.form.issueOffice = this.data.issueOffice
    this.form.passengerList = this.data.passengerList.map(item => ({
      ageType: item.ageType,
      passengerName: item.passengerName,
      passengerMobile: item.passengerMobile,
      birthDate: item.birthDate
    }))

    this.form.tripInfoList = this.data.tripInfoList.map(item => ({
      takeOffTime: item.takeOffTime,
      dPort: item.dPort,
      aPort: item.aPort,
      flight: item.flight,
      subClass: item.subClass
    }))

    this.loadCtcm()
    this.loadCtct()
  },
  methods: {
    initPhone () {
      if (this.options.ctcm.length > 0 && this.form.passengerList.length > 0) {
        this.form.passengerList.forEach((item, idx) => {
          item.passengerMobile = this.options.ctcm[idx % this.options.ctcm.length].key
        })
      }
    },
    queryCtct (qs, cb) {
      cb(this.options.ctct.map(item => ({
        value: item.key
      })))
    },
    queryCtcm (qs, cb) {
      cb(this.options.ctcm.map(item => ({
        value: item.key
      })))
    },
    loadCtcm () {
      this.$service.options.getCtcm().then(res => {
        this.options.ctcm = res.data
      })
    },
    loadCtct () {
      this.$service.options.getCtct().then(res => {
        this.options.ctct = res.data
      })
    },
    onOk (done) {
      this.$refs['form'].validate((valid) => {
        // 校验通过
        if (valid) {
          this.$service.order.createPnr(this.form).then(res => {
            this.$emit('change-pnr')
            this.$emit('ok')
            this.visible = false
            this.$alert(res.msg, '提示')
          }).catch(res => {
            this.$alert(res.msg, '错误')
          }).finally(done)
        } else {
          done()
        }
      })
    }
  }
}
</script>

<style scoped>
.pnr-panel {
  padding: 10px;
  border: 1px solid #aee7fb;
}

.pnr-col {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 10px;
}
</style>
